<template>
	  <el-dialog
	    :append-to-body="true"
	    :before-close="cancel"
	    :close-on-click-modal="false"
	    :title="title"
	    :visible.sync="boxDialogVisible"
	    class="tree-dialog-form scrollbar selectBox"
	    heihgt="607px"
	    width="820px"
	  >
      <div>
        <div>

          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        		<el-table-column type="selection" width="55" />
          		<el-table-column prop="name" label="名称" />
          		<el-table-column prop="vendor" label="厂商" />
          		<el-table-column prop="model" label="型号" />
          		<el-table-column prop="memo" label="说明" />
          </el-table>
          <!--分页组件-->
          <pagination />

          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="confirmSelect">确定</el-button>
            <el-button type="text" @click="cancel">取消</el-button>
          </div>      
        </div>
      </div>
  </el-dialog>
</template>

<script>
import crudIotProduct from '@/api/iot/iotProduct'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'


export default {
  name: "SelectProductList",
  components: { pagination, crudOperation},
  mixins: [presenter(), header(), crud()],
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    boxDialogVisible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    multi: {
      type: Boolean,
      default() {
        return false;  // 默认单选 
      }
    }
  },
  cruds() {
  	debugger
    return CRUD({ 
                  title: '产品选择', 
                  url: 'iot/product', 
                  sort: 'id,asc', 
                  multi: this.propsData.multi,
                  crudMethod: { ...crudIotProduct }})
  },    
  data() {
    return {
      
    };
  },
  computed: {},
  mounted() {},
  created() {},

  watch: {
    boxDialogVisible(value) {
      if (value) {
        this.init();
      }
    }
  },

  methods: {
    /*
      当搜索框对焦时
    */
    onFocus() {
      const search = document.getElementsByClassName("select-box-search")[0];
      search.onclick = () => this.search();
    },
    search() {
    },
    /*
      回车
    */
    enter() {
      return this.search();
    },
    /*
      初始化
    */
    init() {
    },
    cancel() {
      this.$emit("close", false);
    },    
    confirmSelect() {
      this.$emit("save", this.crud.selections);
    },
    // 初始化数据
    initData() {
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
